<template>
	<view class="index">

		<view class="top">
			<image class="header" src="https://xcx.xiaombt.com/img/img/header.png" mode="" :style="{ height: navbarHeight + 'px' }"></image>
			<view class="nav">
				<u-navbar title="首页" bgColor="transparent" leftIconColor='#6C5D47' titleStyle='color:#6C5D47' placeholder>
					<view class="u-nav-slot" slot="left" style="display: flex;align-items: center;">
						<u-icon name="map" size="20"></u-icon>
						<view style="color:#6C5D47 ;">长春</view>
					</view>
				</u-navbar>
			</view>
		
			<view class="select">
				<view class="center">
					<image src="https://xcx.xiaombt.com/img/img/select.png" mode=""></image>

					<u-search placeholder="请输入药材正名|别名" placeholderColor='#D4D3C6' color='#6C5D47' bgColor='transparent'
						searchIconColor='#6C5D47' v-model="keyword" :clearabled='false'></u-search>
				</view>

			</view>
		</view>
	
		<view class="chart" :style="{ marginTop: viewHeight + 'px' }">
			<!-- <image src="https://xcx.xiaombt.com/img/img/chat.png" mode=""></image>
			<view class="title">
				2011-2020年鹿茸及其粉末进出口贸易总量走势图
			</view>
			<view class="chartItem">
				<qiun-data-charts  :canvas2d="true" type="column" :opts="opts" :chartData="chartData" />
			</view> -->
				<swiper class="swiper" circular  :autoplay="autoplay" :interval="interval"
							:duration="duration">
							<swiper-item>
								<image :src="ENV.BASE_API + banner" mode=""></image>
							</swiper-item>
							
						</swiper>
		</view>
		<view class="buttons">
			<image src="https://xcx.xiaombt.com/img/img/icon (3).png" mode="" @click="toWhere('/pages/anmed/index')"></image>
			<image src="https://xcx.xiaombt.com/img/img/icon (5).png" mode="" @click="toWhere('/pages/medan/index')"></image>
		</view>
		<view class="item1">
			<image class="title" src="https://xcx.xiaombt.com/img/img/shuju.png" mode=""></image>
		
		</view>
		<view class="list">
			<view class="list-item">
				中国动物志数据库
			</view>
			<view class="list-item">
				中国兽类数据库
			</view>
			<view class="list-item">
				中国蜜蜂数据库
			</view>
		</view>
		<view class="item2">
			<image class="title" src="https://xcx.xiaombt.com/img/img/zixun.png" mode=""></image>
		
		</view>
		<view class="main">
			<list :datalist='datalist'></list>
		</view>
	



	</view>
</template>

<script>
	import { ENV } from '.env.js'
	import {index,yu} from '@/api/index.js'
	import list from '@/components/list/index.vue'
	export default {
		data() {
			return {
				
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				navbarHeight:null,
				chartData: {},
				viewHeight:null,
				keyword: '',
				datalist:[],
						banner:'',
				ENV:null,
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel: false,
					color: ["#83755D", "#5F4C2F", ],
					padding: [10, 0, 10, 0],
					enableScroll: false,
			
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						axisLineColor: '#735E49',
						fontColor: '#735E49',
						fontSize: 9,

					},
					yAxis: {
						gridColor: '#735E49',

						data: [{
							min: 0,
							axisLineColor: '#735E49',
							fontSize: 9
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 10,
							meterBorde: 1,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							seriesGap: 5,
							linearOpacity: 0.5,

							customColor: [
								"#83755D",
								"#5F4C2F"

							],
							barBorderRadius: [
								2,
								2,
								0,
								0
							]
						}
					}
				}
			};
		},
		components:{
			list
		},
		onReady() {
			this.getServerData();
			
			const query = uni.createSelectorQuery().in(this);
			query.select('.top').boundingClientRect(data => {
			  if (data) {
			    this.viewHeight = data.height;
			  }
			}).exec();
			query.select('.nav').boundingClientRect(data => {
			  if (data) {
			    this.navbarHeight = data.height;
			  }
			}).exec();
			
		},
		mounted() {
				this.ENV = ENV
			uni.showLoading({
				title: '',
				mask: true
			});
			yu({}).then(res=>{
			
				this.banner = res.rst.banner
			})
			index({}).then(res=>{
				uni.hideLoading();
				if (res.errno ==='0') {
				
					this.datalist = [...this.datalist, ...res.rst.zixun]
						console.log(this.datalist)
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					});
				}
			
			})
		},
		methods: {
			toWhere(url){
				uni.navigateTo({
					url: url
				});
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2023", "2023", "2023",
							"2023"
						],
						series: [{
								name: "目标值",
								data: [35, 36, 31, 33, 13, 34, 34, 34, 34, 15]
							},

						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.top {
		width: 100%;
		background-color: #F2EFE9;
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;
		// position: relative;
		
		.header {
			width: 100%;
			height: 180rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.select {
			padding: 20rpx 38rpx;

			.center {
				width: 100%;
				height: 76rpx;
				position: relative;
				display: flex;
				align-items: center;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

	}

	.chart {
		width: 100%;
		height: 338rpx;
		
		box-sizing: border-box;
		position: relative;
		margin-top: 290rpx;
		.swiper{
			width: 100%;
			height: 100%;
		}
		.title {
			width: 100%;
			font-size: 28rpx;
			text-align: center;
			color: #6C5D47;
			font-weight: bold;

		}

		.chartItem {
			width: 100%;
			height: 300rpx;

		}

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}

	.buttons {
		padding: 20rpx 38rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {

			width: 328rpx;
			height: 160rpx;

		}
	}

	.item1 {
		padding: 0 38rpx;
		box-sizing: border-box;
		.title {
			display: block;
			width: 355rpx;
			height: 90rpx;
		}
	}
	.item2 {
		padding: 20rpx 38rpx;
		box-sizing: border-box;
		.title {
			display: block;
			width: 288rpx;
			height: 90rpx;
		}
	}
	.list{
		width: 100%;
		height: 62rpx;
		background-color: #EDEAE5;
		margin-top: -10rpx;
		padding: 20rpx 38rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.list-item{
			flex: 1;
			border-right: 1rpx solid #6C5D47;
			font-size: 24rpx;
			color: #6C5D47;
			padding-left: 20rpx;
			box-sizing: border-box;
		}
		.list-item:nth-of-type(3){
			border-right: 0rpx solid #6C5D47;
		}
	}
	.main{
		padding: 0 38rpx 20rpx 38rpx;
		box-sizing: border-box;
		margin-top: -20rpx;
	}

	
</style>